<template>
    <view class="payment-upload">
        <!-- 收款资料管理 -->
        <view class="header">
            <view class="title">收款信息</view>
            <view class="subtitle">请上传收款码</view>
        </view>

        <view class="image-grid">
            <view v-for="(url, index) in imageUrls" :key="index" class="image-wrapper">
                <image class="image-item" :src="url" mode="aspectFill" @click="handleReplace(index)" />
                <view class="delete-btn" @click.stop="handleDelete(index)">
                    <image class="delete-icon" :src="IMG_URL2+'common/close.svg'"></image>
                </view>
            </view>

            <view class="image-item" @click.stop="handleUpload" v-if="imageUrls.length < 9">
                <image class="chevronright" :src="IMG_URL2+'peop/add.svg'"></image>
            </view>
        </view>
        <view class="button-box px-48">
            <view class="exit-login bg2" @click="onSubmit" :disabled="loading">
                <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon><text>保存</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import {IMG_URL2 } from "@/config";
import { shopApi } from "@/api";
import { BASE_API } from "@/config";

const imageUrls = ref([])
const loading = ref(false);

function handleUpload() {
    uni.chooseImage({
        count: 9 - imageUrls.value.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (chooseImageRes) => {
            chooseImageRes.tempFilePaths.forEach(filePath => {
                uploadImage(filePath);
            });
        },
        fail: (err) => {
            uni.showToast({
                title: '选择图片失败',
                icon: 'none'
            })
        }
    });
}

function handleReplace(index) {
    // 放大图片
    uni.previewImage({
        urls: imageUrls.value,
        current: index
    });
}

function handleDelete(index) {
    imageUrls.value.splice(index, 1);
}

function uploadImage(filePath, replaceIndex = -1) {
    wx.uploadFile({
        url: BASE_API + '/bg/file/upload',
        filePath: filePath,
        name: 'file',
        header: {
            'content-type': 'multipart/form-data'
        },
        formData: {},
        success: function (res) {
            const url = JSON.parse(res.data).result.url;
            if(replaceIndex >= 0) {
                imageUrls.value[replaceIndex] = url;
            } else {
                imageUrls.value.push(url);
            }
        },
        fail: function (res) {
            uni.showToast({
                title: '上传失败',
                icon: 'none'
            });
        }
    });
}

const onSubmit = () => {
    loading.value = true;
    shopApi.SHOPSETSHOPRECEIVEPAYMENTINFO({ imgUrl: imageUrls.value.join(',') }).then(res => {
        loading.value = false;
        if (res.code == 200) {
            uni.showToast({
                title: res.errMsg,
            })
            setTimeout(() => {
                uni.navigateBack()
            })
        }else {
            uni.showToast({ title: res.errMsg, icon: "none" });
        }
    })
}

const getData = () => {
    shopApi.SHOPGETSHOPRECEIVEPAYMENTINFO().then(res => {
        if (res.code == 200) {
            imageUrls.value = res.result.imgUrl ? res.result.imgUrl.split(',') : [];
        }else {
            uni.showToast({ title: res.errMsg, icon: "none" });
        }
    })
}

onLoad((options) => {
    getData()
});
</script>

<style lang="scss" scoped>
.payment-upload {
    min-height: 100vh;
    background-color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    padding-bottom: 120rpx;

    .header {
        margin-bottom: 40rpx;
        display: flex;
        align-items: center;
        .title {
            font-size: 32rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 10rpx;
        }

        .subtitle {
            font-size: 28rpx;
            color: #999;
            margin-left: 24rpx;
        }
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20rpx;

        .image-wrapper {
            position: relative;
            aspect-ratio: 1;

            .delete-btn {
                position: absolute;
                top: -10rpx;
                right: -10rpx;
                width: 40rpx;
                height: 40rpx;
                background: rgba(0,0,0,0.5);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1;

                .delete-icon {
                    width: 24rpx;
                    height: 24rpx;
                }
            }
        }

        .image-item {
            aspect-ratio: 1;
            background-color: rgba(243, 243, 243, 1);
            border-radius: 12rpx;
            overflow: hidden;
            object-fit: cover;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .chevronright {
                width: 28px;
                height: 28px;
            }
        }
    }

    .button-box {
        width: 100%;
        position: fixed;
        bottom: 0rpx;
        left: 0;
        z-index: 9;
        background-color: #fff;
    }

    .exit-login {
        width: 654rpx;
        height: 92rpx;
        line-height: 92rpx;
        background: #D68E44;
        color: #ffffff;
        text-align: center;
        border-radius: 64px;
        font-size: 32rpx;
        margin-bottom: 40rpx;
        display: flex;
        justify-content: center;
    }
}
</style>